<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterLayout.xhtml">

	<ui:define name="pageTitle">#{out.index_title}</ui:define>

	<ui:define name="head-extra">
		<!-- custom css -->
	</ui:define>

	<ui:define name="content">
		<p:growl id="msgs" showDetail="true" />
		<p:dialog header="Create new product" modal="true"
			widgetVar="newProductDialog" minHeight="300" minWidth="400"
			maxHeight="650">
			<h:form id="newProduct">
				<p:panel
					style="width:100%; padding:5px;background: white !important;">
					<h:outputLabel for="purchasePrice" value="Purchase Price"
						style="font-weight:bold" />
					<p:inputText id="purchasePrice"
						value="#{productController.newProduct.purchasePrice}" />
				</p:panel>
				<p:panelGrid columns="2">
					<h:outputLabel for="name" value="Name" style="font-weight:bold" />
					<p:inputText id="name" value="#{productController.newProduct.name}" />
					<h:outputLabel for="category" value="Category"
						style="font-weight:bold" />
					<p:autoComplete id="category"
						value="#{productController.selectedCategory}"
						completeMethod="#{productController.completeText}" var="c"
						itemLabel="#{c.name}" itemValue="#{c}"
						converter="categoryConverterOfProductController" />
					<h:outputLabel for="price" value="Price" style="font-weight:bold" />
					<p:inputText id="price"
						value="#{productController.newProduct.price}" />
					<h:outputLabel for="isSpecialPrice" value="Is SpecialPrice?"
						style="font-weight:bold" />
					<p:selectBooleanButton id="isSpecialPrice"
						value="#{productController.newProduct.isSpecial}" onLabel="Yes"
						offLabel="No" style="width:60px" />
					<h:outputLabel for="specialPrice" value="Special Price"
						style="font-weight:bold" />
					<p:inputText id="specialPrice"
						value="#{productController.newProduct.specialPrice}" />
					<h:outputLabel for="isHighLight" value="Is Highlight?"
						style="font-weight:bold" />
					<p:selectBooleanButton id="isHighLight"
						value="#{productController.newProduct.isHighlight}" onLabel="Yes"
						offLabel="No" style="width:60px" />
					<h:outputLabel for="shortText" value="Short Text?"
						style="font-weight:bold" />
					<p:inputTextarea id="shortText" rows="6" cols="33"
						value="#{productController.newProduct.shortText}" />
					<h:outputLabel for="text" value="Text?" style="font-weight:bold" />
					<p:editor widgetVar="editorWidget" id="text"
						style="max-width: 400px;"
						value="#{productController.newProduct.text}" />
					<p:growl id="messages" showDetail="true" />
					<p:commandButton value="Save"
						action="#{productController.createProduct()}"
						update=":productList" onclick="PF('newProductDialog').close();" />
				</p:panelGrid>
			</h:form>
		</p:dialog>
		<p:dialog header="Update product" modal="true"
			widgetVar="updateProductDialog" minHeight="300" minWidth="400"
			maxHeight="650">
			<h:form id="updateProduct">
				<p:panel
					style="width:100%; padding:5px;background: white !important;">
					<h:outputLabel for="purchasePrice" value="Purchase Price"
						style="font-weight:bold" />
					<p:inputText id="purchasePrice"
						value="#{productController.selectedProduct.purchasePrice}" />
				</p:panel>
				<p:panelGrid columns="2">
					<h:outputLabel for="name" value="Name" style="font-weight:bold" />
					<p:inputText id="name"
						value="#{productController.selectedProduct.name}" />
					<h:outputLabel for="category" value="Category"
						style="font-weight:bold" />
					<p:autoComplete id="category"
						value="#{productController.selectedCategory}"
						completeMethod="#{productController.completeText}" var="c"
						itemLabel="#{c.name}" itemValue="#{c}"
						converter="categoryConverterOfProductController" />
					<h:outputLabel for="price" value="Price" style="font-weight:bold" />
					<p:inputText id="price"
						value="#{productController.selectedProduct.price}" />
					<h:outputLabel for="isSpecialPrice" value="Is SpecialPrice?"
						style="font-weight:bold" />
					<p:selectBooleanButton id="isSpecialPrice"
						value="#{productController.selectedProduct.isSpecial}"
						onLabel="Yes" offLabel="No" style="width:60px" />
					<h:outputLabel for="specialPrice" value="Special Price"
						style="font-weight:bold" />
					<p:inputText id="specialPrice"
						value="#{productController.selectedProduct.specialPrice}" />
					<h:outputLabel for="isHighLight" value="Is Highlight?"
						style="font-weight:bold" />
					<p:selectBooleanButton id="isHighLight"
						value="#{productController.selectedProduct.isHighlight}"
						onLabel="Yes" offLabel="No" style="width:60px" />
					<h:outputLabel for="shortText" value="Short Text?"
						style="font-weight:bold" />
					<p:inputTextarea id="shortText" rows="6" cols="33"
						value="#{productController.selectedProduct.shortText}" />
					<h:outputLabel for="text" value="Text?" style="font-weight:bold" />
					<p:editor widgetVar="editorWidget" id="text"
						style="max-width: 400px;"
						value="#{productController.selectedProduct.text}" />
					<p:growl id="messages" showDetail="true" />
					<p:commandButton value="Save"
						action="#{productController.updateProduct()}"
						update=":productList" onclick="PF('updateProductDialog').close();" />
				</p:panelGrid>
			</h:form>
		</p:dialog>
		<h:form id="productList">
			<p:dataTable id="productTable" var="currentproduct"
				value="#{productController.productModel}"
				rowKey="#{currentproduct.id}" selectionMode="single"
				selection="#{productController.selectedProduct}" paginator="true"
				rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" lazy="true"
				emptyMessage="#{out.empty_message}">
				<p:ajax event="rowSelect" update=":productList:commandButtons" />
				<p:column style="width:16px" headerText="Images">
					<p:rowToggler />
				</p:column>
				<p:column headerText="ID" sortBy="#{currentproduct.id}">
					<h:outputText value="#{currentproduct.id}" />
				</p:column>
				<p:column headerText="Category"
					sortBy="#{currentproduct.category.name}"
					filterBy="#{currentproduct.category.name}">
					<h:outputText value="#{currentproduct.category.name}" />
				</p:column>
				<p:column headerText="Name" sortBy="#{currentproduct.name}"
					filterBy="#{currentproduct.name}">
					<h:outputText value="#{currentproduct.name}" />
				</p:column>
				<p:column headerText="Price" sortBy="#{currentproduct.price}">
					<h:outputText value="#{currentproduct.price}" />
				</p:column>
				<p:column headerText="Purchase Price"
					sortBy="#{currentproduct.purchasePrice}">
					<h:outputText value="#{currentproduct.purchasePrice}" />
				</p:column>
				<p:column headerText="Short Text">
					<h:outputText value="#{currentproduct.shortText}" />
				</p:column>
				<p:rowExpansion id="imageRow">
					<p:panelGrid columns="2">
						<p:fileUpload
							fileUploadListener="#{productController.handleFileUpload}"
							mode="advanced" auto="true" sizeLimit="100000"
							allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
						<p:commandButton value="Upload"
							action="#{productController.saveImageToProduct(currentproduct)}"
							update=":productList" />
					</p:panelGrid>
					<p:dataGrid var="img" value="#{currentproduct.images}" columns="3"
						layout="grid">
						<f:facet name="header">
							<h:outputText value="( #{currentproduct.images.size()} )" />
						</f:facet>
						<p:panel>
							<h:panelGrid columns="1" style="width:100%">
								<p:graphicImage value="#{imageBean.image}"
									style="height: auto; width: 200px;"
									rendered="#{currentproduct.images!=null}">
									<f:param name="id" value="#{img.thumbnailDataId}" />
								</p:graphicImage>
								<p:commandButton value="delete"
									action="#{productController.deleteProductImage(img)}"
									update=":productList" />
							</h:panelGrid>
						</p:panel>
					</p:dataGrid>
				</p:rowExpansion>
			</p:dataTable>
			<p:panel id="commandButtons">
				<p:commandButton value="Create new product"
					action="#{productController.generateNewProduct()}"
					update=":newProduct" onclick="PF('newProductDialog').show();" />
				<p:commandButton value="Update selected product"
					action="#{productController.initSelectedProductCategory()}"
					update=":updateProduct" onclick="PF('updateProductDialog').show();" />
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>